<template>
  <div class="home-container">
    <van-sticky class="box-sticky">
      <van-search v-model="filterField.keywords" placeholder="请输入搜索关键词">
        <template #left>
          <div class="city-title">
            <i class="iconfont icon-dingwei"></i>
            <span>广州</span>
          </div>
        </template>
      </van-search>

      <van-dropdown-menu>
        <van-dropdown-item title="地铁" ref="subwaylineRef">
          <van-tree-select
            v-model:active-id="activeId"
            v-model:main-active-index="activeIndex"
            :items="enumeration.SubwaylineArr"
          />
          <div style="padding: 5px 16px">
            <van-button class="confirm-btn" type="primary" block round @click="subwaylineConfirm"> 确认 </van-button>
          </div>
        </van-dropdown-item>

        <van-dropdown-item v-model="filterField.rent" :options="rentList" ref="rentCom">
          <template #title>
            <span>租金</span>
          </template>
        </van-dropdown-item>

        <van-dropdown-item title="筛选" ref="itemRef">
          <section class="filter-panel">
            <div class="unit-type">
              <div class="sub-text">户型</div>
              <van-radio-group v-model="filterField.unitType" direction="horizontal">
                <van-row class="size-row">
                  <van-col span="8" v-for="(item, index) in enumeration.housesNumberEnu" :key="index"
                    ><van-radio :name="item.code">{{ item.name }}</van-radio></van-col
                  >
                </van-row>
              </van-radio-group>
            </div>

            <div class="area-size">
              <div class="sub-text">面积</div>
              <van-radio-group v-model="filterField.roomSize" direction="horizontal">
                <van-row class="size-row">
                  <van-col span="8" v-for="(item, index) in enumeration.houseAreaEnu" :key="index">
                    <van-radio :name="item.code">{{ item.name }}</van-radio>
                  </van-col>
                </van-row>
              </van-radio-group>
            </div>

            <div style="padding: 5px 16px">
              <van-button class="confirm-btn" type="primary" block round @click="onConfirm"> 确认 </van-button>
            </div>
          </section>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <propertyList></propertyList>
  </div>
</template>

<script>
export default {
  name: 'Home',
};
</script>

<script setup>
import { ref, reactive, shallowRef, onMounted, computed } from 'vue';
import rentList from '@/constants/rent.js';
import propertyList from './propertyList/index.vue';

import { requestHouseAreaEnu, requesHousesNumberEnu, requesSubwaylineArray } from '@/api';
import { useStore } from 'vuex';

import { transformData } from '@/tools';

const store = useStore(); // 获取 Vuex store 对象

const test = computed(() => store.state.test); // 访问 Vuex 中的状态

const itemRef = ref('');
const subwaylineRef = ref('');

const activeId = ref(1);
const activeIndex = ref(0);

const onConfirm = () => {
  itemRef.value.toggle();
};
const subwaylineConfirm = () => {
  subwaylineRef.value.toggle();
};

let state = reactive({});

onMounted(() => {
  console.log('----------------');
  gethouseAreaEnu();
  gethousesNumberEnu();
  getSubwaylineArray();
});

let filterField = reactive({
  area: '',
  rent: '',
  keywords: '',
  unitType: '',
  housetype: '',
  roomSize: '',
});

let enumeration = reactive({
  houseAreaEnu: [],
  housesNumberEnu: [],
  SubwaylineArr: [],
});

function isCache(key) {
  let cache = window.sessionStorage.getItem(key);
  if (cache) {
    return true;
  }
  return false;
}

async function fetchDataIfNeeded(key, fetchDataFunction) {
  try {
    if (!isCache(key)) {
      const res = await fetchDataFunction();
      window.sessionStorage.setItem(key, JSON.stringify(res.data));
    }
    return JSON.parse(window.sessionStorage.getItem(key));
  } catch (error) {
    console.log(error);
    return null;
  }
}

async function gethouseAreaEnu() {
  enumeration.houseAreaEnu = await fetchDataIfNeeded('houseAreaEnu', requestHouseAreaEnu);
}

async function gethousesNumberEnu() {
  enumeration.housesNumberEnu = await fetchDataIfNeeded('housesNumberEnu', requesHousesNumberEnu);
}

async function getSubwaylineArray() {
  try {
    let res = await requesSubwaylineArray();
    enumeration.SubwaylineArr = transformData(res.data);
  } catch (error) {
    console.log(error);
  }
}
</script>

<style lang="less" scoped>
.home-container {
  width: auto;

  .van-ellipsis {
    overflow: visible;
  }

  .box-sticky {
    border-bottom: 1px solid #ececec;
  }

  .city-title {
    font-size: 15px;
    padding-right: 10px;
  }

  .icon-dingwei {
    margin-right: 5px;
  }

  .filter-panel {
    padding: 12px;
    font-size: 13px;
  }

  .van-row {
    width: 100%;
    margin-bottom: 15px;
  }

  .unit-type {
    .sub-text {
      font-size: 14px;
      color: #333;
      margin-bottom: 15px;
      font-weight: 500;
    }

    .size-row {
      row-gap: 15px;
    }
  }

  .house-type {
    .sub-text {
      font-size: 14px;
      color: #333;
      margin-bottom: 15px;
      font-weight: 500;
    }
  }

  .area-size {
    .sub-text {
      font-size: 14px;
      color: #333;
      margin-bottom: 15px;
      font-weight: 500;
    }

    .size-row {
      row-gap: 15px;
    }
  }

  .confirm-btn {
    color: #fff;
  }
}
</style>
